<template>
  <div class="files-container">
    <el-container>
      <!-- 顶部导航 -->
      <el-header class="header">
        <div class="header-left">
          <h2>YY云盘</h2>
        </div>
        <div class="header-right">
          <el-dropdown @command="handleCommand">
            <span class="user-info">
              <el-icon><User /></el-icon>
              {{ userStore.userInfo?.nickname || '用户' }}
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="150px" class="sidebar">
          <el-menu
            :default-active="$route.path"
            router
            background-color="#f5f5f5"
            text-color="#333"
            active-text-color="#409eff"
          >
            <el-menu-item index="/files">
              <el-icon><Folder /></el-icon>
              <span>我的文件</span>
            </el-menu-item>
            <el-menu-item index="/uploads">
              <el-icon><Upload /></el-icon>
              <span>上传列表</span>
            </el-menu-item>
            <el-menu-item index="/share">
              <el-icon><Share /></el-icon>
              <span>我的分享</span>
            </el-menu-item>
            <el-menu-item index="/recycle">
              <el-icon><Delete /></el-icon>
              <span>回收站</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main class="main-content">
          <!-- 面包屑 -->
          <div class="page-header">
            <div class="breadcrumb">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item @click="navigateToFolder(0)">
                  <span class="breadcrumb-link">全部文件</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item
                  v-for="(item, index) in breadcrumbList"
                  :key="item.id"
                  @click="navigateToFolder(item.id, index)"
                >
                  <span class="breadcrumb-link">{{ item.name }}</span>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </div>

          <!-- 工具栏 -->
          <div class="toolbar">
            <div class="toolbar-left">
              <div class="view-controls">
                <!-- 返回上级按钮 -->
                <el-button
                  v-if="currentFolderId !== 0"
                  @click="goBackToParent"
                  size="small"
                >
                  <el-icon><ArrowLeft /></el-icon>
                  返回上级
                </el-button>

                <el-button-group>
                  <el-button :type="viewMode === 'list' ? 'primary' : ''" @click="viewMode = 'list'">
                    <el-icon><List /></el-icon>
                    列表
                  </el-button>
                  <el-button :type="viewMode === 'grid' ? 'primary' : ''" @click="viewMode = 'grid'">
                    <el-icon><Grid /></el-icon>
                    缩略图
                  </el-button>
                </el-button-group>
              </div>

              <div v-if="selectedFiles.length > 0" class="batch-actions">
                <span class="selected-info">已选择 {{ selectedFiles.length }} 项</span>
                <el-button-group>
                  <el-button size="small" @click="handleMove(selectedFiles)">
                    <el-icon><FolderRemove /></el-icon>
                    移动
                  </el-button>
                  <el-button size="small" type="danger" @click="handleBatchDelete">
                    <el-icon><Delete /></el-icon>
                    删除
                  </el-button>
                </el-button-group>
              </div>
            </div>
            <div class="toolbar-right">
              <el-button type="primary" @click="handleUploadClick">
                <el-icon><Upload /></el-icon>
                上传文件
              </el-button>
              <el-button @click="showCreateFolderDialog = true">
                <el-icon><FolderAdd /></el-icon>
                新建文件夹
              </el-button>
              <el-input
                v-model="searchKeyword"
                placeholder="搜索文件"
                style="width: 200px; margin-left: 10px"
                clearable
                @clear="handleSearch"
                @keyup.enter="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
          </div>

          <!-- 文件列表 -->
        <div v-loading="loading" class="file-content">
          <!-- 列表视图 -->
          <div v-if="viewMode === 'list'" class="list-view">
            <el-table
              :data="fileList"
              @selection-change="handleSelectionChange"
              @row-dblclick="handleRowDoubleClick"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="文件名" min-width="300">
                <template #default="scope">
                  <div class="file-name-cell">
                    <el-icon class="file-icon" :size="20">
                      <Folder v-if="scope.row.isFolder" />
                      <Document v-else />
                    </el-icon>
                    <span class="file-name">{{ scope.row.fileName }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="大小" width="120">
                <template #default="scope">
                  {{ scope.row.isFolder ? '-' : formatFileSize(scope.row.fileSize) }}
                </template>
              </el-table-column>
              <el-table-column label="修改时间" width="180">
                <template #default="scope">
                  {{ formatTime(scope.row.updateTime) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <el-button-group>
                    <el-button size="small" @click="handleDownload(scope.row)" v-if="!scope.row.isFolder">
                      <el-icon><Download /></el-icon>
                    </el-button>
                    <el-button size="small" @click="handleShare(scope.row)">
                      <el-icon><Share /></el-icon>
                    </el-button>
                    <el-button size="small" @click="handleRename(scope.row)">
                      <el-icon><Edit /></el-icon>
                    </el-button>
                    <el-button size="small" @click="handleMove([scope.row])">
                      <el-icon><FolderRemove /></el-icon>
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                      <el-icon><Delete /></el-icon>
                    </el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 网格视图 -->
          <div v-if="viewMode === 'grid'" class="grid-view">
            <div class="file-grid">
              <div
                v-for="file in fileList"
                :key="file.id"
                class="file-item"
                @dblclick="handleRowDoubleClick(file)"
              >
                <div class="file-icon-large">
                  <el-icon :size="60">
                    <Folder v-if="file.isFolder" />
                    <Document v-else />
                  </el-icon>
                </div>
                <div class="file-name-grid">{{ file.fileName }}</div>
                <div class="file-info">
                  {{ file.isFolder ? '文件夹' : formatFileSize(file.fileSize) }}
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <el-empty v-if="!loading && fileList.length === 0" description="暂无文件" />
        </div>

        <!-- 分页 -->
        <div class="pagination" v-if="total > 0">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        </el-main>
      </el-container>
    </el-container>


    <!-- 新建文件夹对话框 -->
    <el-dialog v-model="showCreateFolderDialog" title="新建文件夹" width="400px">
      <el-form :model="folderForm" :rules="folderRules" ref="folderFormRef">
        <el-form-item label="文件夹名称" prop="name">
          <el-input v-model="folderForm.name" placeholder="请输入文件夹名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreateFolderDialog = false">取消</el-button>
        <el-button type="primary" @click="handleCreateFolder">确定</el-button>
      </template>
    </el-dialog>

    <!-- 创建分享对话框 -->
    <el-dialog v-model="showShareDialog" title="创建分享" width="500px">
      <el-form :model="shareForm" :rules="shareRules" ref="shareFormRef" label-width="100px">
        <el-form-item label="分享名称" prop="shareName">
          <el-input v-model="shareForm.shareName" placeholder="请输入分享名称" />
        </el-form-item>
        <el-form-item label="访问权限">
          <el-radio-group v-model="shareForm.permissions">
            <el-radio :label="1">仅预览</el-radio>
            <el-radio :label="2">可下载</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="提取码">
          <div style="display: flex; align-items: center; gap: 10px;">
            <el-switch v-model="shareForm.needPassword" />
            <el-input
              v-if="shareForm.needPassword"
              v-model="shareForm.password"
              placeholder="4位提取码"
              maxlength="4"
              style="width: 120px"
              prop="password"
            />
            <el-button v-if="shareForm.needPassword" size="small" @click="generatePassword">
              随机生成
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="有效期">
          <el-radio-group v-model="shareForm.expireDays">
            <el-radio :label="1">1天</el-radio>
            <el-radio :label="7">7天</el-radio>
            <el-radio :label="30">30天</el-radio>
            <el-radio :label="-1">永久有效</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showShareDialog = false">取消</el-button>
        <el-button type="primary" @click="handleCreateShare">创建分享</el-button>
      </template>
    </el-dialog>

    <!-- 分享结果对话框 -->
    <el-dialog v-model="showShareResultDialog" title="分享创建成功" width="500px">
      <div class="share-result">
        <el-form label-width="80px">
          <el-form-item label="分享链接">
            <el-input v-model="shareResult.shareUrl" readonly>
              <template #append>
                <el-button @click="copyShareLink">复制</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item v-if="shareResult.password" label="提取码">
            <el-input v-model="shareResult.password" readonly style="width: 120px" />
          </el-form-item>
        </el-form>
        <el-alert
          title="请妥善保管分享链接和提取码，分享链接泄露可能导致文件被他人下载"
          type="warning"
          :closable="false"
          show-icon
        />
      </div>
      <template #footer>
        <el-button @click="copyShareLink">复制链接</el-button>
        <el-button type="primary" @click="showShareResultDialog = false">完成</el-button>
      </template>
    </el-dialog>

    <!-- 个人信息对话框 -->
    <UserProfileDialog v-model="showProfileDialog" />

    <!-- 文件预览对话框 -->
    <FilePreviewDialog v-model="showPreviewDialog" :file-info="previewFileInfo" />

    <!-- 文件移动对话框 -->
    <FileMoveDialog
      v-model="showMoveDialog"
      :files="filesToMove"
      @success="handleMoveSuccess"
    />

    <!-- 上传进度对话框 -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { useUserStore } from '@/stores/user'
import {
  getFileList,
  createFolder,
  deleteFile,
  renameFile,
  generateDownloadUrl
} from '@/api/file'
import type { FileInfo, FileListParams } from '@/api/file'
import { createShare, type CreateShareParams } from '@/api/share'
import UserProfileDialog from '@/components/UserProfileDialog.vue'
import FilePreviewDialog from '@/components/FilePreviewDialog.vue'
import FileMoveDialog from '@/components/FileMoveDialog.vue'
import {
  User,
  ArrowDown,
  Folder,
  Share,
  Delete,
  Upload,
  FolderAdd,
  ArrowLeft,
  List,
  Grid,
  FolderRemove,
  Download,
  Edit,
  Search,
  UploadFilled
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const loading = ref(false)
const viewMode = ref<'list' | 'grid'>('list')
const searchKeyword = ref('')
const fileList = ref<FileInfo[]>([])
const selectedFiles = ref<FileInfo[]>([])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const currentFolderId = ref(0)
const breadcrumbList = ref<{ id: number; name: string }[]>([])

// 对话框状态
const showCreateFolderDialog = ref(false)
const showShareDialog = ref(false)
const showShareResultDialog = ref(false)
const showProfileDialog = ref(false)
const showPreviewDialog = ref(false)
const showMoveDialog = ref(false)


// 新建文件夹表单
const folderFormRef = ref<FormInstance>()
const folderForm = reactive({
  name: ''
})

// 分享相关
const shareFileInfo = ref<FileInfo | null>(null)
const shareFormRef = ref<FormInstance>()
const shareForm = reactive({
  shareName: '',
  permissions: 2,
  needPassword: false,
  password: '',
  expireDays: 7
})
const shareResult = reactive({
  shareCode: '',
  shareUrl: '',
  password: ''
})

// 预览相关
const previewFileInfo = ref<FileInfo | null>(null)

// 移动相关
const filesToMove = ref<FileInfo[]>([])
const folderRules: FormRules = {
  name: [
    { required: true, message: '请输入文件夹名称', trigger: 'blur' },
    { min: 1, max: 50, message: '文件夹名称长度为1-50个字符', trigger: 'blur' }
  ]
}

const shareRules: FormRules = {
  shareName: [
    { required: true, message: '请输入分享名称', trigger: 'blur' },
    { min: 1, max: 50, message: '分享名称长度为1-50个字符', trigger: 'blur' }
  ],
  password: [
    {
      validator: (rule: any, value: string, callback: Function) => {
        if (shareForm.needPassword && (!value || value.length !== 4)) {
          callback(new Error('请输入4位提取码'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 处理用户菜单命令
const handleCommand = (command: string) => {
  switch (command) {
    case 'profile':
      showProfileDialog.value = true
      break
    case 'logout':
      userStore.logout()
      break
  }
}

// 获取文件列表
const fetchFileList = async () => {
  try {
    loading.value = true
    const params: FileListParams = {
      parentId: currentFolderId.value,
      page: currentPage.value,
      size: pageSize.value,
      orderBy: 'updateTime',
      orderType: 'desc'
    }

    const response = await getFileList(params)
    fileList.value = response.content
    total.value = response.total
  } catch (error: any) {
    ElMessage.error(error.message || '获取文件列表失败')
  } finally {
    loading.value = false
  }
}

// 导航到指定文件夹
const navigateToFolder = (folderId: number, breadcrumbIndex?: number) => {
  currentFolderId.value = folderId

  // 更新面包屑：保留到点击位置的面包屑，移除后面的部分
  if (breadcrumbIndex !== undefined) {
    breadcrumbList.value = breadcrumbList.value.slice(0, breadcrumbIndex + 1)
  } else {
    // 如果是返回根目录，清空面包屑
    breadcrumbList.value = []
  }

  currentPage.value = 1
  fetchFileList()
}

// 返回上级文件夹
const goBackToParent = () => {
  if (breadcrumbList.value.length > 0) {
    // 如果有面包屑，返回到倒数第二个位置
    const parentIndex = breadcrumbList.value.length - 2
    if (parentIndex >= 0) {
      const parentFolder = breadcrumbList.value[parentIndex]
      if (parentFolder) {
        navigateToFolder(parentFolder.id, parentIndex)
      } else {
        navigateToFolder(0)
      }
    } else {
      // 返回根目录
      navigateToFolder(0)
    }
  } else {
    // 直接返回根目录
    navigateToFolder(0)
  }
}

// 处理选择变化
const handleSelectionChange = (selection: FileInfo[]) => {
  selectedFiles.value = selection
}

// 处理双击行
const handleRowDoubleClick = (row: FileInfo) => {
  if (row.isFolder) {
    // 进入文件夹
    currentFolderId.value = row.id
    breadcrumbList.value.push({
      id: row.id,
      name: row.fileName
    })
    currentPage.value = 1
    fetchFileList()
  } else {
    // 预览文件
    handlePreview(row)
  }
}

// 处理下载
const handleDownload = async (file: FileInfo) => {
  try {
    const downloadInfo = await generateDownloadUrl(file.id)
    const link = document.createElement('a')
    link.href = downloadInfo.downloadUrl
    link.download = file.fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    ElMessage.success('开始下载')
  } catch (error: any) {
    ElMessage.error(error.message || '下载失败')
  }
}

// 处理分享
const handleShare = (file: FileInfo) => {
  shareFileInfo.value = file
  shareForm.shareName = file.fileName
  shareForm.permissions = 2
  shareForm.needPassword = false
  shareForm.password = ''
  shareForm.expireDays = 7
  showShareDialog.value = true
}

// 生成随机密码
const generatePassword = () => {
  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789'
  let password = ''
  for (let i = 0; i < 4; i++) {
    password += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  shareForm.password = password
}

// 创建分享
const handleCreateShare = async () => {
  if (!shareFormRef.value) return

  try {
    const valid = await shareFormRef.value.validate()
    if (!valid) return

    if (!shareFileInfo.value) return

    // 计算过期时间
    let expireTimeStr = ''
    if (shareForm.expireDays > 0) {
      const expireDate = new Date()
      expireDate.setDate(expireDate.getDate() + shareForm.expireDays)
      expireTimeStr = expireDate.toISOString().slice(0, 19).replace('T', ' ')
    }

    const params: CreateShareParams = {
      fileId: shareFileInfo.value.id,
      shareName: shareForm.shareName,
      permissions: shareForm.permissions,
      password: shareForm.needPassword ? shareForm.password : undefined,
      expireTimeStr: expireTimeStr || undefined
    }

    const share = await createShare(params)

    // 生成分享链接
    const baseUrl = window.location.origin
    const shareUrl = `${baseUrl}/share/${share.shareCode}`

    shareResult.shareCode = share.shareCode
    shareResult.shareUrl = shareUrl
    shareResult.password = shareForm.needPassword ? shareForm.password : ''

    showShareDialog.value = false
    showShareResultDialog.value = true
    ElMessage.success('分享创建成功')
  } catch (error: any) {
    ElMessage.error(error.message || '创建分享失败')
  }
}

// 复制分享链接
const copyShareLink = async () => {
  try {
    let copyText = `分享链接: ${shareResult.shareUrl}`
    if (shareResult.password) {
      copyText += `\n提取码: ${shareResult.password}`
    }
    await navigator.clipboard.writeText(copyText)
    ElMessage.success('已复制到剪贴板')
  } catch {
    ElMessage.error('复制失败')
  }
}

// 处理重命名
const handleRename = async (file: FileInfo) => {
  try {
    const { value: newName } = await ElMessageBox.prompt('请输入新名称', '重命名', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputValue: file.fileName,
      inputValidator: (value) => {
        if (!value || value.trim().length === 0) {
          return '名称不能为空'
        }
        if (value.length > 50) {
          return '名称长度不能超过50个字符'
        }
        return true
      }
    })

    await renameFile(file.id, newName)
    ElMessage.success('重命名成功')
    fetchFileList()
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '重命名失败')
    }
  }
}

// 处理删除
const handleDelete = async (file: FileInfo) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除"${file.fileName}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await deleteFile(file.id)
    ElMessage.success('删除成功')
    fetchFileList()
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '删除失败')
    }
  }
}

// 处理预览
const handlePreview = (file: FileInfo) => {
  previewFileInfo.value = file
  showPreviewDialog.value = true
}

// 处理移动
const handleMove = (files: FileInfo[]) => {
  if (files.length === 0) {
    ElMessage.warning('请选择要移动的文件')
    return
  }

  filesToMove.value = files
  showMoveDialog.value = true
}

// 移动成功回调
const handleMoveSuccess = () => {
  selectedFiles.value = [] // 清空选中状态
  fetchFileList() // 刷新列表
}

// 批量删除
const handleBatchDelete = async () => {
  if (selectedFiles.value.length === 0) {
    ElMessage.warning('请选择要删除的文件')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedFiles.value.length} 个文件吗？`,
      '确认批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 逐个删除文件
    for (const file of selectedFiles.value) {
      await deleteFile(file.id)
    }

    ElMessage.success(`成功删除 ${selectedFiles.value.length} 个文件`)
    selectedFiles.value = [] // 清空选中状态
    fetchFileList()
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '批量删除失败')
    }
  }
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1
  fetchFileList()
}

// 处理页面大小变化
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  fetchFileList()
}

// 处理当前页变化
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  fetchFileList()
}

// 处理上传按钮点击
const handleUploadClick = () => {
  router.push('/uploads')
}


// 创建文件夹
const handleCreateFolder = async () => {
  if (!folderFormRef.value) return

  try {
    const valid = await folderFormRef.value.validate()
    if (!valid) return

    await createFolder({
      folderName: folderForm.name,
      parentId: currentFolderId.value
    })

    ElMessage.success('创建成功')
    showCreateFolderDialog.value = false
    folderForm.name = ''
    fetchFileList()
  } catch (error: any) {
    ElMessage.error(error.message || '创建失败')
  }
}

// 格式化文件大小
const formatFileSize = (size: number): string => {
  if (size === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(size) / Math.log(k))
  return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 格式化时间
const formatTime = (time: string): string => {
  return new Date(time).toLocaleString()
}

// 初始化
onMounted(() => {
  fetchFileList()
})
</script>

<style scoped>
.files-container {
  height: 100vh;
  width: 100vw;
  background: #f8f9fa;
}

.el-container {
  height: 100%;
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  padding: 0 20px;
}

.header-left h2 {
  margin: 0;
  color: #409eff;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f5f5;
}

.sidebar {
  background-color: #f5f5f5;
  border-right: 1px solid #e6e6e6;
}

.main-content {
  background: #f8f9fa;
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 0 20px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.page-title h3 {
  margin: 0 0 5px 0;
  color: #333;
}

.breadcrumb {
  margin-top: 5px;
}

.breadcrumb-link {
  cursor: pointer;
  color: #409eff;
  transition: color 0.3s;
}

.breadcrumb-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 修复面包屑项的点击区域 */
:deep(.el-breadcrumb__item) {
  cursor: pointer;
}

:deep(.el-breadcrumb__item:last-child .breadcrumb-link) {
  color: #333;
  cursor: default;
}

:deep(.el-breadcrumb__item:last-child .breadcrumb-link:hover) {
  text-decoration: none;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.view-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.batch-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
}

.selected-info {
  font-size: 13px;
  color: #409eff;
  font-weight: 500;
}

.file-content {
  padding: 20px;
  min-height: 400px;
}

.file-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon {
  color: #409eff;
}

.file-name {
  cursor: pointer;
}

.file-name:hover {
  color: #409eff;
}

.grid-view {
  padding: 20px 0;
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
}

.file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.file-item:hover {
  background-color: #f0f0f0;
}

.file-icon-large {
  margin-bottom: 10px;
  color: #409eff;
}

.file-name-grid {
  font-size: 14px;
  text-align: center;
  margin-bottom: 5px;
  word-break: break-all;
}

.file-info {
  font-size: 12px;
  color: #666;
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: #fff;
}
</style>